<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center">
    <div id="squrt" style="width: 350px;height: 350px;transform: translate(10px,-20px)" />
  </div>


</template>

<script>
  let echarts = require('echarts')
  export default {
    name: "squrt",
    props:['prop'],
    data(){
      return {
      }
    },

    methods:{
      init(){
        let salvProName =this.prop.xAxis;
        let salvProValue =this.prop.data;
        let salvProMax =[];//背景按最大值
        for (let i = 0; i < salvProValue.length; i++) {
          salvProMax.push(salvProValue[0])
        }
       let option = {
          grid: {
            left: '2%',
            right: '-0%',
            bottom: '5%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            show: false,
            type: 'value',
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            offset:5,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#56b49c',
                formatter: (value) => {
                  if(value >= 10000){
                    return value/10000 + '万'
                  }
                  else if(value >= 1000){
                    return value/1000 + '千'
                  }
                  return value
                },
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: salvProName
          },
            {
            type: 'category',
            inverse: true,
            offset:-0,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: '#33746e',
                fontSize: '12'
              },
            },
            data:salvProValue
          }
          ],
          series: [{
            name: '值',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'rgb(57,89,255,1)'
                }, {
                  offset: 1,
                  color: 'rgb(46,200,207,1)'
                }]),
              },
            },
            barWidth: 10,
            data: salvProValue
          },
            {
              name: '背景',
              type: 'bar',
              barWidth: 10,
              barGap: '-100%',
              data: salvProMax,
              itemStyle: {
                normal: {
                  color: 'rgba(24,31,68,1)',
                  barBorderRadius: 10,
                }
              },
            },
          ]
        };
        let linearBarDom = echarts.getInstanceByDom(document.getElementById('squrt'))
        if(linearBarDom == null){
          linearBarDom = echarts.init(document.getElementById('squrt'))
        }
        linearBarDom.resize()
        linearBarDom.setOption(option,true)

      }
    },
    watch: {
      prop: {
        handler (val) {
          this.init()
        },
        deep: true
      }
    },
    mounted () {
      this.init()
    },

  }
</script>

<style scoped lang="scss">

</style>
